<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向属性</title>
		<!-- 垂直方向属性 vertical-algin 
			 功能：1.应用于表格中单元格【栅格布局】
				  2.行内元素与行内块元素对齐方式
				    理解文本和图片对齐方式【垂直居中】
					元素种类：
					行内元素：典型行内元素 span、a
					 特点：在一行内显示、不可设置宽高
					块级元素：典型块级元素 div、p
					 特点：独占一行、可设宽高
					行内块元素：典型行内块元素 img
					 特点：可设宽高，在一行内显示
					页面组成：元素之间嵌套生成
					三种元素相互嵌套 √  嵌套根据元素特点页面混乱
					嵌套条件1：在一行内显示【效果】
							  块套行  √  推荐
							  行套行  √
							  行套块  √  增加条件，块添加宽高
							  块套块  √ 
					嵌套条件2：独占一行【效果】
							  块套行  √  推荐
							  行套行  ×
							  行套块  ×  混乱
							  块套块  √ 
		-->
		<style>
			/* 抓每个img
			 派生（后代）选择器：
			 特点：抓取父元素中所有（后代）子元素【元素嵌套特点】
			 伪类选择器：
			 特点：在选择气候，过滤符合“特定条件”某个元素
			 nth-child：选中夫元素中第N个
			符合条件：p中包含4个img
			id抓取父元素：空间大
			class抓取夫元素中某个子元素：微调
			 */
			/*p:nth-child(2){
				border: 1px solid red;
			}
			p:nth-child(3){
				border: 1px solid black;
			}
			p:nth-child(4){
				border: 1px solid green;
			}
			p:nth-child(5){
				border: 1px solid blue;
			}*/
			/* 标准抓取每个img */
			p img.baseline{
				vertical-align: baseline;
			}
			p img.top{
				vertical-align: top;
			}
			p img.bottom{
				vertical-align: bottom;
			}
			p img.middle{
				vertical-align: middle;
				/* vertical-align与text-align区别
				 区别1.属性值不同
					2.vertical-align操作文本和图片垂直
					  text-align操作文本左右和居中以及两边对齐
				*/
			}
		</style>
	</head>
	<body>
		
		 <h1>垂直方向属性使用【针对元素种类】</h1>
		<!-- 顶部对齐，中间对齐，底部对齐
		 图片设置宽高：25px~100px-->
		<p>表情包<img class="baseline" src="img/1.jpg" alt="表情包" width="100px" height="100px" />基线对齐</p>
		<p>小狗1<img class="top" src="img/2.gif" alt="小狗1" width="100px" height="100px"/>顶部对齐</p>
		<p>小狗2<img class="middle" src="img/3.gif" alt="小狗2" width="100px" height="100px"/>中间对齐</p>
		<p>小狗3<img class="bottom" src="img/4.gif" alt="小狗3" width="100px" height="100px"/>底部对齐</p>
		<!-- 绣球：垂直方向属性值 4个属性值
				  如果，不改变现有html结构，可以找到依次4个img
				  抓到4个图片
			思路：派生选择器+伪类选择器
		 -->
	</body>
</html>